import React from 'react';
import { Form, Modal } from 'antd';
import LimitedTextArea from '../../../components/LimitedTextArea';
import { FileFormItem } from './components';
import { sendBackTask } from '../../../services';
import { FORM_DEFAULT_LAYOUT, MODAL_DEFAULT_PARAM, MODAL_FORCE_PARAM } from '../config';

const SendBackActionModal = ({ form, taskId, visible, setVisible, onOk }) => {
    // console.log('PauseActionModal -> taskId', taskId);
    const { getFieldDecorator, validateFields } = form;
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const handleOk = () => {
        validateFields((err, values) => {
            if (err) {
                return;
            }
            setConfirmLoading(true);
            const { operateReason, files = { uploadResourceFile: '' } } = values;
            const { uploadResourceFile = '' } = files;
            sendBackTask({
                taskId,
                operateReason,
                resourceRelation: uploadResourceFile ? [uploadResourceFile] : []
            })
                .then(res => {
                    const { code } = res;
                    if (code === 10000) {
                        if (onOk) onOk();
                        setVisible(false);
                    }
                })
                .finally(() => {
                    setConfirmLoading(false);
                });
        });
    };

    return (
        <Modal
            {...MODAL_DEFAULT_PARAM}
            title="退回"
            width={720}
            visible={visible}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            destroyOnClose
            onCancel={() => setVisible(false)}
            {...MODAL_FORCE_PARAM}
        >
            <Form {...FORM_DEFAULT_LAYOUT} style={{ marginTop: 24 }} labelCol={{ span: 6 }}>
                <Form.Item label="原因">
                    {getFieldDecorator('operateReason', {
                        rules: [
                            {
                                required: true,
                                message: '请输入原因'
                            }
                        ]
                    })(<LimitedTextArea placeholder="请输入原因" />)}
                </Form.Item>
                <FileFormItem form={form} />
            </Form>
        </Modal>
    );
};

export default Form.create()(SendBackActionModal);
